<template>
    <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="450px" :title="`${drawerProps.title}设备`">
        <el-form ref="ruleFormRef" label-width="100px" label-suffix=" :" :rules="rules" :disabled="drawerProps.isView"
            :model="drawerProps.row" :hide-required-asterisk="drawerProps.isView">
            <el-form-item label="设备类型" prop="equipmentType">
                <el-input v-model="drawerProps.row.equipmentType" placeholder="请填写设备类型" clearable></el-input>
            </el-form-item>

            <el-form-item label="设备名称" prop="equipmentName">
                <el-input v-model="drawerProps.row.equipmentName" placeholder="请填写设备名称" clearable></el-input>
            </el-form-item>

            <el-form-item label="制造商" prop="manufacturer">
                <el-input v-model="drawerProps.row.manufacturer" placeholder="请填写制造商名称" clearable></el-input>
            </el-form-item>

            <el-form-item label="设备型号" prop="modelNumber">
                <el-input v-model="drawerProps.row.modelNumber" placeholder="请填写设备型号" clearable></el-input>
            </el-form-item>

            <el-form-item label="序列号" prop="serialNumber">
                <el-input v-model="drawerProps.row.serialNumber" placeholder="请填写设备序列号" clearable></el-input>
            </el-form-item>

            <el-form-item label="安装位置" prop="location">
                <el-input v-model="drawerProps.row.location" placeholder="请填写设备安装位置（如：产线1-A区）" clearable></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="drawerVisible = false">取消</el-button>
            <el-button v-show="!drawerProps.isView" type="primary" @click="handleSubmit">确定</el-button>
        </template>
    </el-drawer>
</template>

<script setup lang="ts" name="EquipmentDrawer">
import { ref, reactive } from "vue";
import { ElMessage, type FormInstance } from "element-plus";
import type { Equipment } from "@/api/modules/equipment";

// 抽屉属性接口
interface DrawerProps {
    title: string;
    isView: boolean;
    row: Partial<Equipment.EquipmentListItem>;
    api?: (params: any) => Promise<any>;
    getTableList?: () => void;
}

// 表单验证规则
const rules = reactive({
    equipmentType: [{ required: true, message: "请填写设备类型" }],
    equipmentName: [{ required: true, message: "请填写设备名称" }],
    manufacturer: [{ required: true, message: "请填写制造商名称" }],
    modelNumber: [{ required: true, message: "请填写设备型号" }],
    serialNumber: [{ required: true, message: "请填写设备序列号" }],
    location: [{ required: true, message: "请填写设备安装位置" }]
});

// 抽屉可见性
const drawerVisible = ref(false);

// 抽屉属性
const drawerProps = ref<DrawerProps>({
    isView: false,
    title: "",
    row: {}
});

// 表单引用
const ruleFormRef = ref<FormInstance>();

// 接收父组件传过来的参数
const acceptParams = (params: DrawerProps) => {
    drawerProps.value = params;
    drawerVisible.value = true;
};

// 提交数据（新增/编辑）
const handleSubmit = () => {
    ruleFormRef.value?.validate(async valid => {
        if (!valid) return;
        try {
            await drawerProps.value.api?.(drawerProps.value.row);
            ElMessage.success({ message: `${drawerProps.value.title}设备成功！` });
            drawerProps.value.getTableList?.();
            drawerVisible.value = false;
        } catch (error) {
            console.log(error);
        }
    });
};

// 暴露方法给父组件
defineExpose({
    acceptParams
});
</script>

<style scoped>
.el-drawer__body {
    padding: 20px;
}
</style>